<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>#{msgs.windowTitle}</title>
	<h:outputStylesheet library="css" name="Styles.css" />
</h:head>

<h:body>
	<h:panelGroup styleClass="toolbar">
		<ui:include src="/resources/templates/toolbar.xhtml" />
	</h:panelGroup>
	<p:panel header="#{msgs.welcome} #{userBean.currentUser.userName}!"
		collapsed="true" />
	<p:spacer height="15px" />
	<h:form id="tweetStreamForm">
		<p:layout style="min-width:700px;min-height:700px;" id="layout">
			<p:layoutUnit header="#{msgs.tweetStream}" position="center"
				maxSize="500" minSize="500">

				<h:panelGroup styleClass="tweet">
					<p:spacer height="10px" />
					<p:spacer height="10px" />


					<h:dataTable value="#{userBean.tweetStream}" var="tweet" border="0">
						<h:column>

							<p:fieldset legend="#{tweet.user}">
								<h:panelGrid columns="2">
									<p:commandLink action="#{userBean.viewTweetUser(tweet)}">
										<h:graphicImage library="profilePics" name="#{tweet.user}.png"
											styleClass="smallImage" height="50" width="50" />
									</p:commandLink>
									<h:outputText value="#{tweet.text}" styleClass="tweets"
										escape="false" />
								</h:panelGrid>
							</p:fieldset>
						</h:column>
					</h:dataTable>

					<p:spacer height="10px" />
				</h:panelGroup>
			</p:layoutUnit>

			<p:layoutUnit position="east" minSize="200" maxSize="500" >

				<p:panel header="#{msgs.tweet}">

					<p:watermark for="newTweetTxt" value="#{msgs.writeTweet}" />
					<h:panelGrid columns="2">
						<p:inputTextarea id="newTweetTxt" value="#{userBean.newTweetText}"
							rows="2" cols="45" maxlength="144">
							<p:ajax event="keyup" update="remainingCharacters" />
						</p:inputTextarea>
						<p:commandButton value="#{msgs.tweet}"
							action="#{userBean.createNewTweet}" update="tweetStreamForm" />
						<h:outputText styleClass="tweet" id="remainingCharacters"
							value="#{msgs.remainingChar} #{userBean.remainingCharacters}" />
					</h:panelGrid>
				</p:panel>
				<p:spacer height="20px"></p:spacer>
				<p:panel header="#{msgs.subscriptions}">
					<p:dataGrid columns="2" value="#{userBean.getMySubscriptions()}"
						var="subscription" border="0">
						<h:column>
							<p:panelGrid columns="2">
								<p:commandLink action="#{userBean.viewUser(subscription)}"
									ajax="false">
									<h:graphicImage library="profilePics"
										name="#{subscription.userName}.png" styleClass="smallImage"
										height="50" width="50" />
									<h:outputText value="#{subscription.userName}"/>
								</p:commandLink>

							</p:panelGrid>

						</h:column>
					</p:dataGrid>
				
				</p:panel>
				<p:spacer height="20px"/>
				<p:panel header="#{msgs.tagCloud}">
					<p:tagCloud model="#{service.tagCloudModel}"/>
				</p:panel>


			</p:layoutUnit>


		</p:layout>
	</h:form>


</h:body>
</html>